<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>测试CRUD</title>
        <link rel="stylesheet" href="//unpkg.com/element-plus/dist/index.css">
        <link rel="stylesheet" href="${path}yq-big/static/css/el-com.css">
        <link rel="stylesheet" href="${path}yq-big/static/css/style.css">

        <script src="//unpkg.com/vue@next"></script>
        <script src="//unpkg.com/element-plus"></script>
        <script src="//unpkg.com/@element-plus/icons-vue"></script>
        <script src="//unpkg.com/element-plus/dist/locale/zh-cn"></script>
        <script src="//unpkg.com/axios/dist/axios.min.js"></script>
    </head>
    <body>
        <div id="list">
            <big-page :table-detail="tableDetail" :pagination-detail="paginationDetail"
                      :operation-detail="operationDetail" :form-detail="formDetail" style="padding: 10px"
                      @change-page="changePage" ref="pageRef"></big-page>
            <el-dialog v-model="dialogTableVisible" :title="title" width="800px">
                <big-form :form-detail="formDiaDetail" ref="formRef"></big-form>
            </el-dialog>
            <big-form-transmit ref="transmitRef"></big-form-transmit>

        </div>
        <script type="module">
            import bigPage from '/yq-big/components/page/bigPage.js'
            import bigForm from '/yq-big/components/form/bigForm.js'
            import bigFormTransmit from '/yq-big/components/formTransmit/bigFormTransmit.js'
            import request from '/yq-big/utils/request.js'
            import plugins from '/yq-big/plugins/index.js'

            const List = {
                data() {
                    return {
                        title: '',
                        baseUrl: 'http://127.0.0.1:9092',
                        formDiaDetail: {
                            formArray: [
                                {
                                    basicInfo: {
                                        name: 'userId',
                                        label: '用户ID',
                                    },
                                    operation: {
                                        readonly: true,
                                    },
                                },
                                {
                                    basicInfo: {
                                        name: 'userName',
                                        label: '用户姓名',
                                    },
                                    operation: {
                                        readonly: true,
                                    },
                                },
                                {
                                    type: 'date',
                                    basicInfo: {
                                        type: 'datetime',
                                        name: 'createTime',
                                        label: '创建时间',
                                        format: 'YYYY-MM-DD HH:mm:ss',
                                        valueFormat: 'YYYY-MM-DD HH:mm:ss',
                                    },
                                    operation: {
                                        readonly: true,
                                        hide: true,
                                    },
                                },
                                {
                                    type: 'select',
                                    basicInfo: {
                                        name: 'gender',
                                        label: '性别',
                                        defaultValue: '男',
                                        placeholder: '请选择',
                                    },
                                    operationInfo: {
                                        key: 'id',//作为渲染的key数组中不可重复
                                        value: 'id',//选项的值的key,若不设置则默认为value
                                        label: 'name',//选项的标签，若不设置则默认与value相同
                                        disabled: 'disable',//选项是否要禁用
                                        //选项的列表
                                        options: [
                                            {
                                                id: '女',
                                                name: '女',
                                                disable: true,
                                            }, {
                                                id: '男',
                                                name: '男',
                                                disable: false,
                                            }
                                        ]
                                    },
                                    operation: {
                                        readonly: true,
                                    }
                                },
                                {
                                    basicInfo: {
                                        name: 'phone',
                                        label: '手机号',
                                    },
                                    operation: {
                                        readonly: true,
                                    },
                                    rules: [
                                        {
                                            type: 'phone',
                                            msg: '请输入正确手机号',
                                            tri: 'change'
                                        }
                                    ],
                                },
                                {
                                    basicInfo: {
                                        name: 'email',
                                        label: '邮箱',
                                    },
                                    operation: {
                                        readonly: true,
                                    },
                                    rules: [
                                        {
                                            type: 'email',
                                            msg: '请输入正确格式',
                                            tri: 'change'
                                        },{
                                            type:'req',
                                            msg:'提示',
                                            tir:'blur'
                                        }

                                    ]
                                },
                                {
                                    basicInfo: {
                                        name: 'idCard',
                                        label: '身份证号',
                                    },
                                    operation: {
                                        readonly: true,
                                    },
                                    rules: [
                                        {
                                            type: 'idCard',
                                            msg: '请输入正确身份证号码',
                                            tri: 'change'
                                        }
                                    ],
                                },
                            ],
                            operation: {
                                detail: [
                                    {
                                        value: '确定',
                                        type: 'primary',
                                        plain: true,
                                        beforeIcon: 'Check',
                                        method: this.submitClick,
                                        hide: true,
                                    }
                                ],
                                layout: {
                                    align: 'center'
                                }
                            }
                        },
                        formDetail: {
                            formArray: [
                                {
                                    type: 'input-num',
                                    basicInfo: {
                                        name: 'userId',
                                        label: '用户ID',
                                        // defaultValue: '大帅逼'   //输入框默认填充数据
                                        placeholder: '请输入用户ID', //输入框提示内容
                                    },
                                    operation: {
                                        readonly: false,
                                        disabled: false,
                                        controls: false,//是否使用控制按钮
                                        hide: false,
                                    },
                                },
                                {
                                    basicInfo: {
                                        name: 'userName',
                                        label: '用户姓名',
                                        placeholder: '请输入用户姓名', //输入框提示内容
                                    },
                                    operation: {
                                        clearable: true,
                                    },
                                },
                                {//TODO: 增加新增输入框
                                    type: 'select',
                                    basicInfo: {
                                        name: 'gender',
                                        label: '性别',
                                        placeholder: '请选择', //输入框提示内容
                                    },
                                    operationInfo: {
                                        key: 'id',//作为渲染的key数组中不可重复
                                        value: 'id',//选项的值的key,若不设置则默认为value
                                        label: 'name',//选项的标签，若不设置则默认与value相同
                                        disabled: 'disable',//选项是否要禁用
                                        //选项的列表
                                        options: [
                                            {
                                                id: '女',
                                                name: '女',
                                                disable: true,
                                            }, {
                                                id: '男',
                                                name: '男',
                                                disable: false,
                                            }
                                        ]
                                    },
                                    operation: {
                                        // readonly: false,
                                        // disabled: false,
                                        clearable: true,
                                    }
                                },
                                {
                                    basicInfo: {
                                        name: 'phone',
                                        label: '手机号',
                                        placeholder: '请输入手机号', //输入框提示内容
                                    },
                                    operation: {
                                        clearable: true,
                                    },
                                },
                                {
                                    basicInfo: {
                                        name: 'email',
                                        label: '邮箱',
                                        placeholder: '请输入邮箱', //输入框提示内容
                                    },
                                    operation: {
                                        clearable: true,
                                    },
                                },
                                {
                                    basicInfo: {
                                        name: 'idCard',
                                        label: '身份证号',
                                        placeholder: '请输入身份证号', //输入框提示内容
                                    },
                                    operation: {
                                        clearable: true,
                                    },
                                },
                                {
                                    type: 'date',
                                    basicInfo: {
                                        type: 'daterange',
                                        name: ['timeInterval'],
                                        // defaultValue: [],
                                        label: '创建时间',
                                        format: 'YYYY-MM-DD HH:mm:ss',
                                        valueFormat: 'YYYY-MM-DD HH:mm:ss',
                                        defaultTime: [
                                            new Date(2000, 1, 1, 0, 0, 0),
                                            new Date(2000, 2, 1, 23, 59, 59),
                                        ]
                                    },
                                    operation: {
                                        clearable: true,
                                    },

                                },
                            ],
                        },
                        dialogTableVisible: false,
                        operationDetail: [{
                            value: '搜索',//按钮显示内容
                            type: 'primary',//按钮类型
                            plain: true,//按钮朴素
                            beforeIcon: 'Search',//按钮前图标
                            method: this.seachClick
                        }, {
                            value: '新增',//按钮显示内容
                            type: 'primary',//按钮类型
                            plain: true,//按钮朴素
                            method: this.addClick//按钮点击触发事件
                        }, {
                            value: '重置',//按钮显示内容
                            type: 'primary',//按钮类型
                            plain: true,//按钮朴素
                            method: this.resetClick//按钮点击触发事件
                        }],
                        tableDetail: {
                            tableData:  ${@jsKit.parser(list)},
                            tableLabel: [
                                {
                                    label: "编号",
                                    prop: 'id',
                                }, {
                                    label: "用户ID",
                                    prop: 'userId',
                                }, {
                                    label: "用户姓名",
                                    prop: 'userName',
                                }, {
                                    label: "性别",
                                    prop: 'gender',
                                }, {
                                    label: "手机号",
                                    prop: 'phone',
                                }, {
                                    label: "邮箱",
                                    prop: 'email',
                                }, {
                                    label: "身份证号",
                                    prop: 'idCard',
                                }, {
                                    label: "创建时间",
                                    prop: 'createTime',
                                }, {
                                    label: "修改时间",
                                    prop: 'updateTime',
                                }
                            ],
                            operationDetail: [
                                {
                                    name: '详情',//按钮显示内容
                                    icon: 'Place',//按钮前图标
                                    method: this.detailClick
                                }, {
                                    type: 'conceal',//操作台下拉
                                    name: '更多',
                                    icon: 'Orange',
                                    detail: [//下拉数据
                                        {
                                            name: '修改数据',
                                            method: this.updateClick//按钮点击触发事件
                                        }, {
                                            name: '删除',
                                            icon: 'Delete',
                                            method: this.delClick//按钮点击触发事件
                                        }
                                    ]
                                },
                            ],
                        },
                        paginationDetail: {
                            pageSize: 20,
                            pageNum: 20,
                            total: 2000,
                        },
                    }
                },
                components: {
                    bigPage, bigForm, bigFormTransmit
                },
                methods: {
                    resetClick() {
                        this.$modal.msg('反对法')
                        this.$refs.pageRef.resetForm();
                        this.getList();
                    },
                    changePage() {
                        console.log('我要分页')
                        console.log(this.paginationDetail)
                    },
                    //条件查询订单数据
                    seachClick() {
                        let data = this.$refs.pageRef.getFormData() ;
                        var userId = data.userId;
                        var userName = data.userName;
                        var createTime = data.createTime;
                        console.log(userId);
                        console.log(userName);
                        console.log(createTime);
                        console.log(data);
                        request({
                            baseUrl: this.baseUrl,
                            url: '/order/list',
                            data: data,
                            method: "post"
                        }).then((res) => {
                            console.log(res)
                            this.tableDetail.tableData = res.data
                        })
                    },
                    submitClick() {
                        let isTG = this.$refs.formRef.verificationForm()
                        console.log(isTG)
                        if (isTG){
                            console.log("提交按钮被点击");
                            let data = this.$refs.formRef.getFormData();
                            console.log(data);
                            if (this.editId) {
                                data.id = this.editId;
                                request({
                                    baseUrl: this.baseUrl,
                                    method: "put",
                                    url: '/order/edit',
                                    data: data,
                                }).then((res) => {
                                    this.getList();
                                    this.dialogTableVisible = false;
                                });
                            } else {
                                request({
                                    baseUrl: this.baseUrl,
                                    url: '/order/add',
                                    data: data,
                                    method: "post"
                                }).then((res) => {
                                    this.getList()
                                    this.dialogTableVisible = false;
                                });
                            }
                        }else{
                            console.log('验证失败')
                        }
                        // return
                        // console.log("提交按钮被点击");
                        // let data = this.$refs.formRef.getFormData();
                        // console.log(data);
                        // if (this.editId) {
                        //     data.id = this.editId;
                        //     request({
                        //         baseUrl: this.baseUrl,
                        //         method: "put",
                        //         url: '/order/edit',
                        //         data: data,
                        //     }).then((res) => {
                        //         this.getList();
                        //         this.dialogTableVisible = false;
                        //     });
                        // } else {
                        //     request({
                        //         baseUrl: this.baseUrl,
                        //         url: '/order/add',
                        //         data: data,
                        //         method: "post"
                        //     }).then((res) => {
                        //         this.getList()
                        //         this.dialogTableVisible = false;
                        //     });
                        // }
                    },
                    getList() {
                        let data = this.$refs.pageRef.getFormData();
                        request({
                            baseUrl: this.baseUrl,
                            url: '/order/ord/list',
                            params: data,
                            method: "get"
                        }).then((res) => {
                            console.log('刷新页面')
                            this.tableDetail.tableData = res.data;
                        })
                    },
                    addClick() {
                        console.log("新增按钮被点击")
                        this.dialogTableVisible = true
                        this.formDiaDetail.formArray.forEach((item, index) => {
                            // item.basicInfo.defaultValue = null  //将默认值清除
                            item.operation.readonly = false
                        })
                        this.formDiaDetail.formArray[0].operation.hide = false
                        this.formDiaDetail.formArray[2].operation.hide = true
                        this.formDiaDetail.formArray[3].operation.hide = false
                        this.formDiaDetail.formArray[4].operation.hide = false
                        this.formDiaDetail.formArray[5].operation.hide = false
                        this.formDiaDetail.formArray[6].operation.hide = false
                        this.formDiaDetail.operation.detail[0].hide = false

                        this.title = '添加个人信息'
                        this.$nextTick(() => {
                            this.$refs.formRef.initData()
                        })
                    },
                    delClick(order) {
                        console.log("删除按钮被点击", order);
                        var id = order.row.id;
                        console.log(order.row.id);
                        request({
                            baseUrl: this.baseUrl,
                            url: '/order/del/' + id,
                            method: 'delete'
                        }).then(() => {
                            this.getList();
                        })
                    },
                    updateClick(order) {
                        console.log("修改按钮被点击", order);
                        console.log(order)
                        this.editId = order.row.id
                        this.formDiaDetail.formArray.forEach((item, index) => {
                            item.basicInfo.defaultValue = order.row[item.basicInfo.name]
                            item.operation.readonly = false
                        })
                        this.formDiaDetail.formArray[0].operation.hide = false
                        this.formDiaDetail.formArray[2].operation.hide = true
                        this.formDiaDetail.operation.detail[0].hide = false
                        this.title = '修改个人信息'
                        this.dialogTableVisible = true
                        this.$nextTick(() => {
                            this.$refs.formRef.initData()
                        })
                    },
                    detailClick(order) {
                        this.formDiaDetail.formArray.forEach((item, index) => {
                            item.basicInfo.defaultValue = order.row[item.basicInfo.name]
                            item.operation.readonly = true
                            item.operation.hide = false
                        })
                        this.title = '查看订单信息'
                        this.dialogTableVisible = true
                        this.formDiaDetail.operation.detail[0].hide = true
                        this.$nextTick(() => {
                            this.$refs.formRef.initData()
                        })
                    },
                }
            };

            const list = Vue.createApp(List);
            list.use(ElementPlus, {
                locale: ElementPlusLocaleZhCn,
            });
            list.use(plugins)
            for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
                list.component(key, component)
            }
            list.mount("#list");
        </script>

    </body>
</html>
